<template>
  <el-card class="container">
    <el-button type="primary" @click="addTrademark">添加品牌</el-button>

    <!--
      data 数据
      border 带边框
    -->
    <el-table :data="trademarkList" border class="table">
      <!--
        el-table-column 列
          prop 当前列要展示的数据名称
          label 列（表）头的名称
          width 列的宽度
       -->
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="tmName" label="品牌名称" />
      <el-table-column label="品牌LOGO">
        <template v-slot="{ row }">
          <img class="trademark-logo" :src="row.logoUrl" :alt="row.tmName">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="warning"
            icon="el-icon-edit"
            @click="updateTrademark(row)"
          >修改</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="delTrademark(row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="pageSize"
      layout="  prev, pager, next, jumper, sizes, total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 添加或修改品牌的对话框 -->
    <el-dialog
      :title="trademark.id ? '修改品牌' : '添加品牌'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form
        ref="form"
        style="width:80%"
        :model="trademark"
        label-width="100px"
        label-position="left"
        class="demo-ruleForm"
      >
        <el-form-item
          label="品牌名称"
          prop="tmName"
          :rules="[{ required: true, message: '输入不能为空' }]"
        >
          <el-input
            v-model="trademark.tmName"
            @blur="trademark.tmName = $event.target.value.trim()"
          />
        </el-form-item>
        <el-form-item
          label="品牌Logo"
          prop="logoUrl"
          :rules="[{ required: true, message: '上传不能为空' }]"
        >
          <!--
            上传图片组件
            action="xxx" 上传图片服务器地址
              写完整地址：http://39.98.123.211/admin/product/fileUpload
              走代理服务器：/dev-api/admin/product/fileUpload
                process.env.VUE_APP_BASE_API
            show-file-list 显示文件列表（是否上传多张图片）
            on-success 上传成功触发事件
            before-upload 上传之前触发的事件
          -->
          <el-upload
            class="avatar-uploader"
            :action="`${baseURL}/admin/product/fileUpload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="trademark.logoUrl"
              :src="trademark.logoUrl"
              class="avatar"
            >
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过1M
            </div>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  reqGetTrademarkList,
  reqSaveTrademark,
  reqRemoveTrademark,
  reqUpdateTrademark
} from '@/api/product/trademark'

export default {
  name: 'Trademark',
  data() {
    return {
      // 品牌数据列表
      trademarkList: [],
      currentPage: 1, // 当前页码
      pageSize: 3, // 每页条数
      total: 0, // 总数
      loading: false, // 加载中图片的开关
      dialogVisible: false, // 添加品牌的对话框显示隐藏
      // isUpdateTrade:false,//判断是不是修改
      trademark: {
        tmName: '',
        logoUrl: ''
      },
      baseURL: process.env.VUE_APP_BASE_API
    }
  },
  mounted() {
    this.getTrademarkList()
  },
  methods: {
    // 获取品牌分页列表
    async getTrademarkList() {
      this.loading = true
      const { currentPage, pageSize } = this
      const res = await reqGetTrademarkList(currentPage, pageSize)
      this.trademarkList = res.data.records
      this.total = res.data.total
      // this.$message({
      //   type: 'success',
      //   message: '添加品牌分页列表成功'
      // })
      this.loading = false
    },
    // 点击添加品牌
    addTrademark() {
      this.dialogVisible = true
      // 上来先清空表单数据
      // console.log(this.$refs.form);
      if (this.$refs.form) this.$refs.form.resetFields() // 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.trademark = {
        tmName: '',
        logoUrl: ''
      }
    },
    // 当每页条数发生变化触发的回调
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getTrademarkList()
    },
    // 当当前页码发生变化触发的回调
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getTrademarkList()
    },
    // 图片上传前触发的回调
    beforeAvatarUpload(file) {
      // 对上传的图片类型大小进行限制
      const isValidFileType = ['image/jpeg', 'image/jpg', 'image/png'].includes(
        file.type
      )

      const isLtM = file.size / 1024 / 1024 < 1

      if (!isValidFileType) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
      }
      if (!isLtM) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return isValidFileType && isLtM
    },
    // 图片上传成功触发的事件
    handleAvatarSuccess(res) {
      this.trademark.logoUrl = res.data
      // 清空表单校验结果
      this.$refs.form.clearValidate(['logoUrl'])
    },
    // 提交表单事件
    submitForm() {
      // 整体验证
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 表单验证通过
          const { trademark } = this
          const { tmName, logoUrl, id } = this.trademark
          try {
            if (id) {
              // 有id是修改
              await reqUpdateTrademark(trademark)
            } else {
              // 是增加
              await reqSaveTrademark(tmName, logoUrl)
            }
          } catch (error) {
            this.$message.error(`${trademark.id ? '修改' : '添加'}品牌成功`)
          }

          // 提示添加成功
          this.$message.success(`${id ? '修改' : '添加'}品牌成功`)
          // 发送请求，请求最新的数据展示
          this.getTrademarkList()
          this.dialogVisible = false
          // this.isUpdateTrade = false
        }
      })
    },
    // 修改品牌
    updateTrademark(row) {
      this.dialogVisible = true
      // this.isUpdateTrade=true
      this.trademark = { ...row }
    },
    // 删除品牌
    delTrademark(row) {
      const that = this
      const { trademarkList } = this
      async function successCb() {
        // 当最后一页只有一条时，currentPage要-1
        // const isLast=total % pageSize === 1 && Math.ceil(total/pageSize) ===that.currentPage
        // if(isLast) currentPage--
        trademarkList.length > 1 ? that.currentPage : that.currentPage--
        await reqRemoveTrademark(row.id)
        that.$message({
          type: 'success',
          message: '删除成功!'
        })
        that.getTrademarkList()
      }

      this.$confirm(
        `此操作将永久删除 <i class="warning-text">${row.tmName}</i> 品牌, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true
        }
      )
        .then(successCb)
        .catch(() => {
          this.$message.info('已取消删除')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: 10px;
}
.table {
  margin: 10px 5px;
}
.trademark-logo {
  width: 120px;
  height: 90px;
}
</style>
